<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>发现广告 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #3b7adb;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 分类导航 */
    .category-tabs {
      display: flex;
      background-color: white;
      padding: 10px 15px;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid #eee;
    }
    
    .category-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .category-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 16px;
      font-size: 14px;
      margin-right: 8px;
      white-space: nowrap;
      color: #666;
    }
    
    .category-tab.active {
      background-color: #3b7adb;
      color: white;
    }
    
    /* 广告卡片通用样式 */
    .ad-list {
      padding: 10px 15px;
    }
    
    .ad-card {
      background-color: white;
      border-radius: 12px;
      margin-bottom: 15px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.2s;
    }
    
    .ad-card:hover {
      transform: translateY(-2px);
    }
    
    .ad-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: rgba(255, 87, 34, 0.9);
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 500;
    }
    
    .ad-header {
      padding: 12px 15px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .ad-avatar {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      margin-right: 10px;
      object-fit: cover;
    }
    
    .ad-owner {
      flex: 1;
    }
    
    .ad-owner-name {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .ad-owner-meta {
      font-size: 12px;
      color: #999;
    }
    
    .ad-actions {
      color: #999;
    }
    
    /* 多图广告样式 */
    .ad-multi-image {
      position: relative;
    }
    
    .multi-image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    
    .multi-image-item {
      aspect-ratio: 1;
      overflow: hidden;
    }
    
    .multi-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 大图广告样式 */
    .ad-single-image {
      position: relative;
    }
    
    .single-image {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
    
    /* 无图广告样式 */
    .ad-no-image {
      padding: 15px;
    }
    
    /* 广告内容样式 */
    .ad-content {
      padding: 15px;
    }
    
    .ad-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .ad-description {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    
    .ad-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #999;
    }
    
    /* 广告标签与按钮 */
    .ad-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }
    
    .ad-tag-item {
      background-color: #f0f7ff;
      color: #3b7adb;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 4px;
    }
    
    .ad-cta {
      display: inline-block;
      background-color: #3b7adb;
      color: white;
      padding: 6px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      margin-top: 8px;
    }
    
    .ad-cta.secondary {
      background-color: #f0f7ff;
      color: #3b7adb;
      margin-left: 8px;
    }
    
    /* 沉浸式广告样式 */
    .ad-immersive {
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }
    
    .immersive-image {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
    
    .immersive-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      padding: 20px 15px 15px;
      color: white;
    }
    
    .immersive-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .immersive-desc {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 10px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3b7adb;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 广告类型切换器 */
    .view-options {
      display: flex;
      justify-content: center;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .view-option {
      padding: 8px 15px;
      font-size: 14px;
      color: #666;
      border-bottom: 2px solid transparent;
    }
    
    .view-option.active {
      color: #3b7adb;
      border-bottom-color: #3b7adb;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">推荐广告</h1>
    <div class="text-white">
      <i class="fa fa-cog"></i>
    </div>
  </div>
  
  <!-- 视图切换 -->
  <div class="view-options">
    <div class="view-option active" data-view="mixed">混合视图</div>
    <div class="view-option" data-view="card">卡片视图</div>
    <div class="view-option" data-view="immersive">沉浸式</div>
  </div>
  
  <!-- 分类导航 -->
  <div class="category-tabs">
    <div class="category-tab active">全部</div>
    <div class="category-tab">美食</div>
    <div class="category-tab">服饰</div>
    <div class="category-tab">数码</div>
    <div class="category-tab">旅游</div>
    <div class="category-tab">美妆</div>
    <div class="category-tab">家居</div>
    <div class="category-tab">运动</div>
  </div>
  
  <!-- 广告列表 -->
  <div class="ad-list">
    <!-- 多图广告 -->
    <div class="ad-card">
      <div class="ad-header">
        <img src="https://picsum.photos/100/100?random=10" alt="广告主头像" class="ad-avatar">
        <div class="ad-owner">
          <div class="ad-owner-name">城市美食指南</div>
          <div class="ad-owner-meta">官方认证 · 美食领域</div>
        </div>
        <div class="ad-actions">
          <i class="fa fa-ellipsis-h"></i>
        </div>
      </div>
      
      <div class="ad-multi-image">
        <div class="ad-tag">广告</div>
        <div class="multi-image-grid">
          <div class="multi-image-item">
            <img src="https://picsum.photos/400/400?random=20" alt="广告图片" class="multi-image">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/400/400?random=21" alt="广告图片" class="multi-image">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/400/400?random=22" alt="广告图片" class="multi-image">
          </div>
        </div>
      </div>
      
      <div class="ad-content">
        <div class="ad-title">城市隐藏美食地图，带你探索不一样的味蕾体验</div>
        <div class="ad-tags">
          <span class="ad-tag-item">美食探店</span>
          <span class="ad-tag-item">本地特色</span>
          <span class="ad-tag-item">限时优惠</span>
        </div>
        <div class="ad-description">
          精选全城50家隐藏美食店铺，从街头小吃到私房菜，满足你的味蕾探索。现在关注并分享，即可获得专属折扣券。
        </div>
        <a href="#" class="ad-cta">立即查看</a>
        <a href="#" class="ad-cta secondary">了解更多</a>
      </div>
    </div>
    
    <!-- 大图广告 -->
    <div class="ad-card">
      <div class="ad-header">
        <img src="https://picsum.photos/100/100?random=11" alt="广告主头像" class="ad-avatar">
        <div class="ad-owner">
          <div class="ad-owner-name">科技新品馆</div>
          <div class="ad-owner-meta">官方认证 · 数码领域</div>
        </div>
        <div class="ad-actions">
          <i class="fa fa-ellipsis-h"></i>
        </div>
      </div>
      
      <div class="ad-single-image">
        <div class="ad-tag">推广</div>
        <img src="https://picsum.photos/800/450?random=23" alt="广告图片" class="single-image">
      </div>
      
      <div class="ad-content">
        <div class="ad-title">全新超薄笔记本电脑，性能与便携的完美结合</div>
        <div class="ad-tags">
          <span class="ad-tag-item">数码新品</span>
          <span class="ad-tag-item">限时促销</span>
          <span class="ad-tag-item">免息分期</span>
        </div>
        <div class="ad-description">
          最新款超薄笔记本，搭载最新处理器，续航长达12小时，重量仅1.2kg。现在购买立减500元，还可享6期免息。
        </div>
        <a href="#" class="ad-cta">立即购买</a>
        <a href="#" class="ad-cta secondary">查看详情</a>
      </div>
    </div>
    
    <!-- 无图广告 -->
    <div class="ad-card">
      <div class="ad-header">
        <img src="https://picsum.photos/100/100?random=12" alt="广告主头像" class="ad-avatar">
        <div class="ad-owner">
          <div class="ad-owner-name">知识付费平台</div>
          <div class="ad-owner-meta">官方认证 · 教育领域</div>
        </div>
        <div class="ad-actions">
          <i class="fa fa-ellipsis-h"></i>
        </div>
      </div>
      
      <div class="ad-no-image">
        <div class="ad-title">年度会员限时特惠，畅学300+精品课程</div>
        <div class="ad-tags">
          <span class="ad-tag-item">知识付费</span>
          <span class="ad-tag-item">会员特惠</span>
          <span class="ad-tag-item">终身学习</span>
        </div>
        <div class="ad-description">
          限时72小时，年度会员买一送一，包含职场技能、语言学习、商业思维等多个领域300+精品课程，随时随地学习提升。
        </div>
        <a href="#" class="ad-cta">立即抢购</a>
        <a href="#" class="ad-cta secondary">课程列表</a>
      </div>
    </div>
    
    <!-- 沉浸式广告 -->
    <div class="ad-immersive">
      <img src="https://picsum.photos/800/450?random=24" alt="沉浸式广告" class="immersive-image">
      <div class="ad-tag">推荐</div>
      <div class="immersive-overlay">
        <div class="ad-owner-name" style="color: white; margin-bottom: 8px;">海岛度假酒店</div>
        <div class="immersive-title">夏日海岛度假特惠，连住3晚享7折</div>
        <div class="immersive-desc">
          私人海滩、无边泳池、海景房，给你完美假期体验。提前预订可免费升级房型。
        </div>
        <a href="#" class="ad-cta" style="background-color: white; color: #3b7adb;">立即预订</a>
      </div>
    </div>
    
    <!-- 多图广告（2张图） -->
    <div class="ad-card">
      <div class="ad-header">
        <img src="https://picsum.photos/100/100?random=13" alt="广告主头像" class="ad-avatar">
        <div class="ad-owner">
          <div class="ad-owner-name">时尚服饰旗舰店</div>
          <div class="ad-owner-meta">官方认证 · 服饰领域</div>
        </div>
        <div class="ad-actions">
          <i class="fa fa-ellipsis-h"></i>
        </div>
      </div>
      
      <div class="ad-multi-image">
        <div class="ad-tag">广告</div>
        <div class="multi-image-grid">
          <div class="multi-image-item" style="grid-column: span 2;">
            <img src="https://picsum.photos/400/400?random=25" alt="广告图片" class="multi-image">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/400/400?random=26" alt="广告图片" class="multi-image">
          </div>
        </div>
      </div>
      
      <div class="ad-content">
        <div class="ad-title">夏季新款连衣裙，时尚与舒适并存</div>
        <div class="ad-tags">
          <span class="ad-tag-item">夏季新品</span>
          <span class="ad-tag-item">满减活动</span>
          <span class="ad-tag-item">包邮</span>
        </div>
        <div class="ad-description">
          2023夏季新款连衣裙，多种款式可选，采用透气面料，舒适亲肤。活动期间满300减50，满500减100。
        </div>
        <a href="#" class="ad-cta">进店选购</a>
        <a href="#" class="ad-cta secondary">查看尺码</a>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-bullhorn nav-icon"></i>
      <span>广告</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-shopping-cart nav-icon"></i>
      <span>商城</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 分类切换
    const categoryTabs = document.querySelectorAll('.category-tab');
    categoryTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        categoryTabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    // 视图切换
    const viewOptions = document.querySelectorAll('.view-option');
    const adList = document.querySelector('.ad-list');
    
    viewOptions.forEach(option => {
      option.addEventListener('click', function() {
        viewOptions.forEach(o => o.classList.remove('active'));
        this.classList.add('active');
        
        const viewType = this.getAttribute('data-view');
        
        // 根据视图类型切换样式
        if (viewType === 'card') {
          adList.style.padding = '10px 5px';
          document.querySelectorAll('.ad-card, .ad-immersive').forEach(card => {
            card.style.margin = '0 5px 10px';
            card.style.borderRadius = '8px';
          });
        } else if (viewType === 'immersive') {
          adList.style.padding = '10px 15px';
          document.querySelectorAll('.ad-card').forEach(card => {
            card.style.display = 'none';
          });
          document.querySelectorAll('.ad-immersive').forEach(ad => {
            ad.style.display = 'block';
            ad.style.marginBottom = '15px';
          });
        } else {
          // 混合视图
          adList.style.padding = '10px 15px';
          document.querySelectorAll('.ad-card, .ad-immersive').forEach(card => {
            card.style.display = 'block';
            card.style.margin = '0 0 15px';
            card.style.borderRadius = '12px';
          });
        }
      });
    });
    
    // 模拟广告点击事件
    document.querySelectorAll('.ad-card, .ad-immersive').forEach(ad => {
      ad.addEventListener('click', function(e) {
        // 排除点击操作按钮的情况
        if (!e.target.closest('.ad-actions') && !e.target.closest('.ad-cta')) {
          const adTitle = this.querySelector('.ad-title, .immersive-title').textContent;
          alert(`查看广告详情: ${adTitle}`);
        }
      });
    });
    
    // 广告操作按钮点击事件
    document.querySelectorAll('.ad-actions').forEach(action => {
      action.addEventListener('click', function(e) {
        e.stopPropagation();
        alert('广告操作菜单');
      });
    });
  </script>
</body>
</html>
